<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"
	trimDirectiveWhitespaces="true"%>
<%@page import="java.util.Date"%>
<%@ include file="../../admin.inc.jsp"%>

<link type="text/css" rel="stylesheet" href="${styleContextPath}/styles/ztree/css/zTreeStyle.css" />
<script type="text/javascript" src="${styleContextPath}/styles/ztree/js/jquery.ztree.all-3.5.js"></script>
<script type="text/javascript" language="javascript">
/**ztree的参数配置，setting主要是设置一些tree的属性，是本地数据源，还是远程，动画效果，是否含有复选框等等**/  
	var zTree;
    var setting = {
            view:{
            	addHoverDom: addHoverDom,
				removeHoverDom: removeHoverDom,
                selectedMulti:false
            },
            edit: {
                enable: true,
                editNameSelectAll:true,
                removeTitle:'删除',
                showRenameBtn: false
            },
            data: {
                keep:{
                    parent:true,
                    leaf:true
                },
                simpleData: {
                    enable: true
                }
            },
            callback:{
                beforeRemove:beforeRemove,//点击删除时触发，用来提示用户是否确定删除
                onRemove:onRemove,//删除节点后触发，用户后台操作
                beforeDrag:beforeDrag,//用户禁止拖动节点
                onClick:clickNode//点击节点触发的事件
            }
        };
	function addHoverDom(treeId, treeNode) {
		var sObj = $("#" + treeNode.tId + "_span");
		if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
		var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
			+ "' title='新增' onfocus='this.blur();'></span>";
		sObj.after(addStr);
		var btn = $("#addBtn_"+treeNode.tId);
		
		if (treeNode.editNameFlag || $("#editBtn_"+treeNode.tId).length>0) return;
		var editStr = "<span class='button edit' id='editBtn_" + treeNode.tId
			+ "' title='编辑' onfocus='this.blur();'></span>";
		if(!treeNode.isParent){
			sObj.before(editStr);
		}
		var editbtn = $("#editBtn_"+treeNode.tId);
		
		if (btn) btn.bind("click", function(){
			$('#add').attr('href','${webContextPath}/admin/adminModule/toAdd?parentId='+treeNode.id);//通向后台的目标链接
			 $('#add').click();
			return false;
		});
		if (btn) editbtn.bind("click", function(){
			if(treeNode.isParent){
	            alert("不准编辑非叶子节点！");
	            return false;
	        }
			$('#edit').attr('href','${webContextPath}/admin/adminModule/toEdit?id='+treeNode.id);//通向后台的目标链接
			 $('#edit').click();
			return false;
		});
	};
	function removeHoverDom(treeId, treeNode) {
		$("#addBtn_"+treeNode.tId).unbind().remove();
		$("#editBtn_"+treeNode.tId).unbind().remove();
	};
    var zNodes;
    $(document).ready(function(){
    	$.ajax({  
            async : false,  
            cache:false,  
            type: 'POST',  
            dataType : "json",  
            url: "${webContextPath}/admin/adminModule/doGetPrivilegeTree",//请求的action路径  
            error: function () {//请求失败处理函数  
                alert('请求失败');  
            },  
            success:function(data){ //请求成功后处理函数。   
                zNodes = data;   //把后台封装好的简单Json格式赋给treeNodes  
            }  
        });
    	
        zTree = $.fn.zTree.init($("#tree"), setting, zNodes);
    });
    function beforeRemove(e,treeId,treeNode){
        return confirm("你确定要删除吗？");
    }
    function onRemove(e,treeId,treeNode){
    	if(treeNode.isParent){
            alert("不准删除非叶子节点！");
            return false;
        }
        $('#delete').attr('href','${webContextPath}/admin/adminModule/deleteSingle?id='+treeNode.id);//通向后台的目标链接
		 $('#delete').click();
		return false;
    }
    function clickNode(e,treeId,treeNode){
    	$('#id').val(treeNode.id);
    	$('#parentId').val(treeNode.pId);
    	$('#name').val(treeNode.name);
    	$('#url').val(null);
    	$('#sysCode').val(null);
    	$('#enableFlag').val(null);
    	$('#orderIndex').val(null);
    	$('#description').val(null);
    	$.post('${webContextPath}/admin/adminModule/getModuleById',{"id":treeNode.id},
				function(data) { 
			        var module=data.data.module;
			        if(module!=null){
			        	$('#url').val(module.url);
			        	$('#sysCode').val(module.sysCode);
			        	$('#enableFlag').val(module.enableFlag);
			        	$('#orderIndex').val(module.orderIndex);
			        	$('#description').val(module.description);
			        }
			  })
    }
    function beforeDrag(treeId,treeNodes){
        return false;
    }
    </script>
    <a id="add"   target="dialog" mask="true" width="430" height="500"  hidden="true"><span>添加菜单</span></a>
	<a id="edit"  title="编辑" target="dialog"  mask="true" width="430" height="500" hidden="true">编辑</a>
	<a id="delete"  title="删除" target="ajaxTodo"  hidden="true">删除</a>
    <style type="text/css">
.ztree li span.button.add {margin-left:2px; margin-right: -1px; background-position:-144px 0; vertical-align:top; *vertical-align:middle}
.leftside{ background: #E6E6E6; float: left; height: 100%; width: 300px; margin: 0px; overflow-y:auto; } 
.rightside{ background: white; height: 100%; width:100%; align:right;}
	</style>
<body>
    <div class="leftside">
		<ul id="tree" class="ztree"></ul>
	</div>
    <div class="rightside" >
    		<p>
				<label style="margin-right:40px;">ID：</label>
				<input id="id" type="text" name="id"   readonly="true">
			</p>
    
			<p>
				<label style="margin-right:16px;">上级ID：</label>
				<input id="parentId"  type="text" name="parentId"   readonly="true">
			</p>
			
			<p>
				<label style="margin-right:30px;">名称：</label>
				<input id="name" type="text" name="name"   readonly="true">
			</p>
			
			<p>
				<label style="margin-right:30px;">URL：</label>
				<input id="url" type="text" name="url"   readonly="true">
			</p>
			
			<p>
				<label style="margin-right:6px;">系统代码：</label> 
				<select id = "sysCode" name="sysCode" class="required" disabled="true" >
					<option value="admin"  ${sysCode=="admin"?"selected":""}>admin</option>
				</select> 
			</p>
			
			<p>
				<label style="margin-right:6px;">启用标识：</label> 
				<select id = "enableFlag" name="enableFlag" class="required" disabled="true" >
					<option value="1"  ${enableFlag=="1"?"selected":""}>是</option>
					<option value="0"  ${enableFlag=="0"?"selected":""}>否</option>
				</select> 
			</p>
			
			<p>
				<label style="margin-right:30px;">顺序：</label>
				<input id="orderIndex" type="text" name="orderIndex"  value="${orderIndex}"  readonly="true">
			</p>

			<p>
				<label style="margin-right:30px;">描述：</label>
				<input id="description" type="text" name="description"  value="${description }"  readonly="true">
			</p>
		</div>
</body>